<template>
	<view class="container">
		<Navbar fixed />
		<view class="create"> Create a post </view>
		<view class="create-area">
			<view class="title">Publish content：</view>
			<view class="create-area-rich">
				<textarea
					class="textarea"
					v-model="txt"
					placeholder="create a post"
					placeholder-style="color:#ffffff"
					:maxlength="-1"
					cursor-color="#ffffff"></textarea>
			</view>
		</view>
		<view class="create-btn">
			<button @click="save">Save</button>
		</view>
	</view>
</template>

<script setup>
	import Navbar from '@/components/Navbar/Navbar.vue';
	import { createMoment } from '@/api/explore.js';
	import { ref } from 'vue';
	import { navigateTo } from '@/utils';

	const txt = ref();

	const save = async () => {
		if (!txt.value) return;
		console.log('txt===>', txt.value);
		const res = await createMoment(txt.value);
		console.log('发布朋友圈--->', res);
		if (res.code == 200) {
			navigateTo('/pages/explore/index');
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 84rpx 36rpx;
	}

	.create {
		color: #7a7a7a;
		text-align: laeft;
		font-family: 'PINGFANG-HEAVY';
		font-size: 42rpx;
		font-weight: 600;
	}

	.create-area {
		margin-top: 50rpx;
		width: 100%;

		.title {
			color: #dcdcdc;
			text-align: left;
			font-family: 'PINGFANG-MEDIUM';
			font-size: 24rpx;
			font-weight: 500;
		}

		&-rich {
			margin-top: 10rpx;
			width: 100%;
			height: 450rpx;
			background-color: #141b31;
			border-radius: 20rpx;
			padding: 20rpx;

			.textarea {
				width: 100%;
				color: #bec5d2;
				font-family: 'PINGFANG-MEDIUM';
				font-size: 28rpx;
				font-weight: 600;
				height: 100%;
			}
		}
	}

	.create-btn {
		margin-top: 40rpx;
		width: 100%;
		padding: 40rpx;
		button {
			background-color: #b8cef6;
			height: 98rpx;
			padding: 28rpx 55rpx;
			color: #000000;
			font-family: 'PINGFANG-MEDIUM';
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			letter-spacing: 5rpx;
		}
	}
</style>
